<template>
  <div class="ai-assistant">
    <div class="messages">
      <div
        v-for="(message, index) in messages"
        :key="index"
        :class="['message', message.role]"
      >
        <div class="avatar">
          <img
            v-if="message.role === 'user'"
            :src="userAvatar"
            alt="用户头像"
            class="user-avatar"
          />
          <img v-else :src="aiAvatar" alt="AI头像" class="ai-avatar" />
        </div>
        <div class="bubble">
          <span>{{ message.content }}</span>
        </div>
      </div>
    </div>
    <div class="input-area">
      <el-input
        v-model="newMessage"
        placeholder="请输入消息..."
        class="message-input"
        @keyup.enter="handleSendMessage"
        clearable
      >
        <template #append>
          <el-button
            type="primary"
            @click="handleSendMessage"
            :disabled="!newMessage.trim() || isSending"
            :class="{ 'active-button': isSendButtonActive }"
            >发送
            <el-icon class="el-icon--right"><Promotion /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Promotion } from "@element-plus/icons-vue";
import { ref, getCurrentInstance, computed } from "vue";
const instance = getCurrentInstance();
const proxy = instance?.proxy as any;

import { useUserStore } from "@/stores/userStore";
const userStore = useUserStore();
const userData: UserInfo = userStore.getUserData();

import userAvatar from "@/assets/OIP-C.jpg";
import aiAvatar from "@/assets/XF.jpg";

import { MessageList, DebounceFunc, sendMessage } from "@/types/message";
import { RequestParams } from "@/types/request";
import { UserInfo } from "@/types/user";

const messages = ref<Array<MessageList>>([
  { role: "assistant", content: "您好，我是您的AI助手，有什么可以帮您的吗？" },
]);
const newMessage = ref<string>("");
//请求锁，避免重复发送
const isSending = ref<boolean>(false);

//防抖函数，避免多次执行导致性能问题
//func：需要防抖的函数，返回新函数（闭包），新函数调用时：清除定时器（取消上次延迟执行的计划），重设定时器
const debounce: DebounceFunc = (func, delay) => {
  let timeout: any | null = null;
  return (...args: Parameters<typeof func>) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

const sendMessage: sendMessage = async (message: string) => {
  isSending.value = true;
  try {
    messages.value.push({ role: "user", content: message });
    let result: any = await proxy.request({
      method: "post",
      url: proxy.api.chat,
      data: { question: message } as RequestParams,
      headers: {
        authentication: userData.token,
        "Content-Type": "application/json",
      },
      showLoading: false,
    });
    if (!result) {
      return;
    }
    if (result) {
      messages.value.push({ role: "assistant", content: result });
    } else {
      messages.value.push({
        role: "assistant",
        content: "抱歉，我无法理解您的问题。",
      });
    }
  } catch (error: any) {
    messages.value.push({
      role: "assistant",
      content: "请求失败，请稍后再试。错误类型" + error.msg,
    });
  } finally {
    isSending.value = false;
  }
};

const debounceSendMessage = debounce(sendMessage, 300);
const handleSendMessage = () => {
  const currentMessage = newMessage.value.trim();
  if (!currentMessage) return;
  newMessage.value = "";
  debounceSendMessage(currentMessage);
};

const isSendButtonActive = computed(() => {
  return newMessage.value.trim() !== "";
});
</script>

<style scoped>
.ai-assistant {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(
    135deg,
    hsl(0, 0%, 100%),
    hsl(235, 44%, 95%),
    hsl(223, 100%, 94%),
    hsl(226, 78%, 87%)
  );
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.message {
  display: flex;
  gap: 12px;
  max-width: 100%;
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.avatar {
  flex-shrink: 0;
}

.avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bubble {
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.5;
  position: relative;
  max-width: 70%;
  word-break: break-word;
}

.message.user .bubble {
  background: #1890ff;
  color: white;
  border-radius: 12px 12px 0 12px;
}

.message.assistant .bubble {
  background: white;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px 12px 12px 0;
}

.input-area {
  padding: 16px 20px;
  background: white;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

.message-input {
  border-radius: 20px;
  font-size: 16px;
  height: 6vh;
  overflow: hidden;
}

.message-input :deep(.el-input__wrapper) {
  border-radius: 20px 0 0 20px;
  padding-left: 20px;
}

.message-input :deep(.el-input-group__append) {
  border-radius: 0 20px 20px 0;
  padding: 0 12px;
}

.active-button {
  background-color: #1890ff;
  border-color: #1890ff;
  color: white;
}

/* 滚动条样式 */
.messages::-webkit-scrollbar {
  width: 6px;
}

.messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
